<script setup lang="ts">
import { AppConfig } from '@/config'
import { localeStorage, type SupportLanguage } from '@/i18n'
import { Bars3Icon } from '@heroicons/vue/24/outline'
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'

const route = useRoute()
const { t, locale } = useI18n()

const navItems = [
  { path: '/', labelKey: 'header.home' },
  { path: '/point-groups', labelKey: 'header.pointGroups' },
  { path: '/space-groups', labelKey: 'header.spaceGroups' },
  { path: '/magnetic-groups', labelKey: 'header.magneticGroups' },
  { path: '/spin-groups', labelKey: 'header.spinGroups' }
]

const isActive = (path: string) => (path === '/' ? route.path === path : route.path.startsWith(path))

// 监听语言变化，同步到 localStorage
watch(locale, newLocale => (localeStorage.value = newLocale as SupportLanguage))
</script>

<template>
  <header class="navbar bg-base-100/80 sticky top-0 z-50 min-h-0 px-8 py-2.5 shadow-sm backdrop-blur-md">
    <div class="navbar-start">
      <router-link to="/" class="flex-between h-10 gap-2" aria-label="Back to Home">
        <img src="/logo-cmpdc.png" alt="CMPDC Logo" class="h-8" />
        <div class="divider divider-horizontal my-auto h-6!"></div>
        <img src="/favicon.png" :alt="`${AppConfig.name} Logo`" class="h-10" />
        <span class="ml-2 text-lg font-semibold">{{ t(AppConfig.name) }}</span>
      </router-link>
    </div>
    <div class="navbar-center hidden lg:flex">
      <router-link v-for="item in navItems" :key="item.path" :to="item.path" class="px-3 py-2 text-sm font-medium" :class="{ 'nav-active': isActive(item.path) }">
        {{ t(item.labelKey) }}
      </router-link>
    </div>
    <div class="navbar-end gap-3">
      <!-- 语言切换 -->
      <label class="swap swap-flip">
        <input type="checkbox" id="language-toggle" name="language" v-model="locale" true-value="zh-cn" false-value="en" />
        <div class="swap-on text-sm font-medium">{{ t('common.language.zh') }}</div>
        <div class="swap-off text-sm font-medium">{{ t('common.language.en') }}</div>
      </label>

      <!-- 移动端菜单 -->
      <div class="dropdown dropdown-end lg:hidden">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <Bars3Icon class="h-5 w-5" />
        </div>
        <ul tabindex="0" class="menu dropdown-content menu-sm rounded-box bg-base-100 z-1 mt-3 w-52 p-2 shadow">
          <li v-for="item in navItems" :key="item.path">
            <router-link :to="item.path" :class="{ active: isActive(item.path) }">
              {{ t(item.labelKey) }}
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
